<!--
 * @Author: gaotang
 * @Date: 2024年12月30日
 * @Email: qq23745038@126.com
 * @LastEditors: gaotang
 * @LastEditTime: 2024-12-30 23:00:35
-->
<template>
  <div class="page-warp" @mouseleave="showChat = false" :style="myStyle">
    <div class="page-search" v-if="$store.state.setting.pageNo === 3">
      <div class="search-btn" @click="handlerSearch"></div>
      <el-popover placement="bottom" width="100" trigger="click" v-model="visibleCar" popper-class="car-popover">
        <div style="color: #FFF; font-size: 16px;">车牌号</div>
        <div v-for="item in gridData" :key="item.name" style="margin: 10px 0; cursor: pointer; color: #ddd;"
          @click="handlerCarNO(item)">{{ item.name }}</div>
        <input class="search-txt" placeholder="请输入搜索关键字" slot="reference" v-model="searchTxt" />
      </el-popover>
    </div>
    <!-- <div class="page-search" v-else>
      <div class="search-btn"></div>
      <input class="search-txt" placeholder="请输入搜索关键字" />
    </div>
    <div class="page-jb" @click="showChat = true"></div>
    <div class="page-chat" v-if="showChat"></div>
     -->

    <div class="mapwrap" v-if="showCar">
      <ItemWrap style="height: 500px; width: 1000px;" class="dialog" title="车辆行驶轨迹">
        <div class="close" @click.stop="showCar = false;">
          <i class="el-input__icon el-icon-close"></i>
        </div>
        <div id="bMap" style="width: 100%; height: 93%; "></div>
      </ItemWrap>
    </div>
  </div>
</template>

<script>
import { currentPOST } from "api/modules";
import { initMap, createGuiJi, clearGuiJi } from "@/utils/map/baidu";
import { bd09ToWgs84 } from "@/utils/map/mapUtils";

export default {
  name: 'JBBox',
  computed: {
    myStyle() {
      const pageNo = this.$store.state.setting.pageNo
      this.resetModal();
      if (pageNo === 3) { //运输车辆
        return {
          bottom: '300px',
          right: '-450px'
        }
      } else if (pageNo === 2) { //智慧园区
        return {
          bottom: '300px',
          right: '-450px'
        }
      }
      else if (pageNo === 1) { //数字货运
        return {
          top: '30px',
          right: '-300px'
        }
      } else if (pageNo === 4) { //国际贸易
        return {
          top: 0,
          right: '-40px'
        }
      } else if (pageNo === 5) { //数据应用
        return {
          top: '30px',
          right: '-540px'
        }
      } else {
        return {
          top: 0,
          right: '-40px'
        }
      }

    }
  },
  data() {
    return {
      bMap: null,
      showChat: false,
      visibleCar: false,
      showCar: false,
      searchTxt: '',
      gridData: [{
        name: '鲁Q610CD'
      }, {
        name: '鲁Q963RS'
      }, {
        name: '鲁Q959EZ'
      }, {
        name: '鲁Q209PN'
      }, {
        name: '鲁Q197TJ'
      }]
    };
  },
  mounted() {
    document.onkeydown = () => {
      //!this.clickState是防止用户重复点击回车
      if (window.event.keyCode === 13 && this.searchTxt) this.handlerSearch();
    };
  },
  methods: {
    createMap() {
      this.bMap = initMap();
    },
    setBMapGuiji(vehicleNo) {
      // 创建一个新的 Date 对象，表示当前日期和时间
      let today = new Date();
      // 创建一个新的 Date 对象，表示昨天的日期和时间
      let yesterday = new Date(today);
      // 使用 setDate 方法将日期减去一天
      yesterday.setDate(today.getDate() - 1);

      if (this.bMap && vehicleNo && vehicleNo.length > 4) {
        currentPOST("mapGps", {
          vehicleNo, // : '鲁Q077CD',
          startTimeLong: yesterday.getTime() / 1000,
          // startTimeLong: 1687693401,
          // endTimeLong: 1718877870,
          endTimeLong: today.getTime() / 1000,
        }).then((res) => {
          if (res.success) {
            console.log("mapGps----", res);
            const gjData = res.data && res.data.gps_list ? res.data.gps_list : []
            if (gjData.length > 1) {
              const filterData = gjData.filter((item, idx) => (idx === 0 || idx === gjData.length - 1 || idx % 10 === 0))
              // createGuiJi(this.bMap, gjData)
              createGuiJi(this.bMap, filterData)
            } else {
              this.bMap && clearGuiJi(this.bMap)
            }
          }
        });
      } else {
        console.log('请选择合法有车牌的车辆轨迹')
        this.bMap && clearGuiJi(this.bMap)
      }
    },
    handlerSearch() {
      this.showCar = true;

      setTimeout(() => {
        this.createMap();
        this.setBMapGuiji(this.searchTxt);
        // this.setSuperGuiji(this.searchTxt);
      }, 1000)
    },
    handlerCarNO(item) {
      this.searchTxt = item.name;
      this.visibleCar = false;
    },
    setSuperGuiji(vehicleNo) {
      // 创建一个新的 Date 对象，表示当前日期和时间
      let today = new Date();
      // 创建一个新的 Date 对象，表示昨天的日期和时间
      let yesterday = new Date(today);
      // 使用 setDate 方法将日期减去一天
      yesterday.setDate(today.getDate() - 1);

      if (vehicleNo && vehicleNo.length > 4) {
        currentPOST("mapGps", {
          vehicleNo, // : '鲁Q077CD',
          startTimeLong: yesterday.getTime() / 1000,
          // startTimeLong: 1687693401,
          // endTimeLong: 1718877870,
          endTimeLong: today.getTime() / 1000,
        }).then((res) => {
          if (res.success) {
            console.log("mapGps----", res);
            const gjData = res.data && res.data.gps_list ? res.data.gps_list : []
            if (gjData.length > 1) {
              this.createSuperGuiJi(vehicleNo, gjData)
            } else {
              this.clearSuperGuiJi(vehicleNo)
            }
          }
        });
      } else {
        console.log('请选择合法有车牌的车辆轨迹')
        this.clearSuperGuiJi()
      }
    },
    createSuperGuiJi(vehicleNo, data) {
      // console.log("🚀 ~ createSuperGuiJi ~ data:", data);
      this.$store.state.setting.currentGuji = {
        actionName: "AddPath",
        carNo: 200001, //vehicleNo,
        points: data.filter((item, idx) => (idx === 0 || idx === data.length - 1 || idx % 10 === 0)).map(item => {
          const [lng, lat] = bd09ToWgs84(item.lon, item.lat)
          return {
            "coord": `${lng},${lat}`,   //路径坐标点 lng,lat
            "coord_z": 2               //高度(单位:米)
          }
        }),
      }
    },
    clearSuperGuiJi(vehicleNo) {
      //   currentGuji: {
      //   actionName: "RemoveAllCovering",
      //   carNo: vehicleNo,
      //   data: [],
      // }
    },
    resetModal() {
      this.showCar = false;
    },
  }
};
</script>

<style>
.car-popover {
  background-color: #001631;
  border: 1px solid #0d2746;
}

.car-popover .popper__arrow::after {
  border-bottom-color: #001631 !important;
  /* 调整箭头颜色 */
}
</style>
<style lang="scss" scoped>
.page-warp {
  // border: 1px solid red;
  position: relative;
  pointer-events: auto;
  // top: 0;
  height: 300px;
  // background: url('../assets/img/launch/jb_logo.png') no-repeat center;
  background-position: right bottom;
  background-size: 190px 260px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  .mapwrap {
    // margin-top: -20px;
    // margin-bottom: -50px;
    height: 480px;
    width: 100%;
    box-sizing: border-box;
    position: absolute;
    top: -180px;
    left: -950px;

    .close {
      position: absolute;
      right: 15px;
      top: 10px;
      cursor: pointer;
    }

    .dialog {
      width: 600px;
      height: 300px;
      position: absolute;
      z-index: 999;
    }
  }

  .page-jb {
    pointer-events: none;
    position: absolute;
    right: 0;
    bottom: 0;
    // border: 1px solid red;
    width: 190px;
    height: 260px;
    cursor: pointer;
  }

  .page-chat {
    pointer-events: auto;
    background: url('../assets/img/launch/chat.png') no-repeat center;
    background-size: cover;
    // border: 1px solid yellow;
    position: absolute;
    top: -280px;
    left: -400px;
    width: 780px;
    height: 460px;
  }

  .page-search {
    margin-bottom: 20px;
    width: 400px;
    height: 62px;
    // border: 1px solid red;
    background: url('../assets/img/launch/jb_search.png') no-repeat center;
    background-position: right bottom;
    background-size: 336px 62px;
    display: flex;
    justify-content: flex-end;

    .search-btn {
      width: 80px;
      height: 62px;
      cursor: pointer;
    }

    .search-txt {
      border-width: 0;
      width: 250px;
      height: 62px;
      background-color: transparent;
      color: #b0d9ff;
      font-size: 22px;
      text-indent: 1em;

      &::placeholder {
        color: #b0d9ff;
      }

      &:focus {
        outline: none;
      }
    }
  }
}
</style>
